<template>
  <view class="container">
    <!-- 商品码输入区域 -->
    <view class="input-section">
      <view class="input-group">
        <input 
          type="text" 
          placeholder="输入商品码" 
          v-model="goodsCode"
          class="goods-input"
        />
        <button class="add-btn" @click="addGoodsByCode">添加</button>
      </view>
      
      <view class="btn-group">
        <button class="scan-btn" @click="scanCode">扫一扫</button>
        <button class="verify-btn" @click="verifyAndReceive">核销领取</button>
      </view>
    </view>
    
    <!-- 购物车区域 -->
    <view class="cart-section">
      <view class="cart-header">
        <text class="cart-title">购物车</text>
        <button class="clear-btn" @click="clearCart">清空</button>
      </view>
      
      <view class="cart-list">
        <view class="cart-item" v-for="(item, index) in cartList" :key="index">
          <image class="item-img" src="/static/goods-default.png" mode="widthFix"></image>
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-price">¥{{ item.price.toFixed(2) }}</text>
          </view>
          <view class="item-count">
            <button class="count-btn" @click="decreaseCount(index)" :disabled="item.count <= 1">-</button>
            <text class="count">{{ item.count }}</text>
            <button class="count-btn" @click="increaseCount(index)">+</button>
          </view>
        </view>
      </view>
      
      <!-- 合计和结算 -->
      <view class="cart-footer">
        <view class="total">
          <text>合计: </text>
          <text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
        </view>
        <button class="checkout-btn" @click="checkout" :disabled="cartList.length === 0">结算</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsCode: '',
      cartList: [
        { name: '娃哈哈矿泉水', price: 2.00, count: 1 },
        { name: '可口可乐', price: 2.00, count: 1 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((total, item) => {
        return total + (item.price * item.count);
      }, 0);
    }
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.goodsRetail')
  	});
  },
  methods: {
    // 通过商品码添加商品
    addGoodsByCode() {
      if (!this.goodsCode.trim()) {
        uni.showToast({
          title: '请输入商品码',
          icon: 'none'
        });
        return;
      }
      
      // 这里只是示例，实际应根据商品码从服务器获取商品信息
      const demoGoods = {
        '1001': { name: '娃哈哈矿泉水', price: 2.00 },
        '1002': { name: '可口可乐', price: 2.00 },
        '1003': { name: '雪碧', price: 2.00 }
      };
      
      const goods = demoGoods[this.goodsCode];
      if (goods) {
        const existingIndex = this.cartList.findIndex(item => item.name === goods.name);
        if (existingIndex > -1) {
          this.cartList[existingIndex].count++;
        } else {
          this.cartList.push({ ...goods, count: 1 });
        }
        this.goodsCode = '';
        uni.showToast({ title: '添加成功' });
      } else {
        uni.showToast({
          title: '未找到该商品',
          icon: 'none'
        });
      }
    },
    
    // 扫码功能
    scanCode() {
      uni.scanCode({
        success: (res) => {
          this.goodsCode = res.result;
          this.addGoodsByCode();
        },
        fail: (err) => {
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          });
          console.error('扫码失败:', err);
        }
      });
    },
    
    // 核销领取
    verifyAndReceive() {
     uni.navigateTo({
        url: '/pages/goods/goods-write-off'
      });
    },
    
    // 清空购物车
    clearCart() {
      if (this.cartList.length === 0) return;
      
      uni.showModal({
        title: '提示',
        content: '确定要清空购物车吗？',
        success: (res) => {
          if (res.confirm) {
            this.cartList = [];
          }
        }
      });
    },
    
    // 减少数量
    decreaseCount(index) {
      this.cartList[index].count--;
    },
    
    // 增加数量
    increaseCount(index) {
      this.cartList[index].count++;
    },
    
    // 结算
    checkout() {
      if (this.cartList.length === 0) return;
      
     uni.navigateTo({
        url: '/pages/goods/order'
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16rpx;
}

/* 输入区域样式 */
.input-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.input-group {
  display: flex;
  margin-bottom: 24rpx;
}

.goods-input {
  flex: 1;
  height: 88rpx;
  border: 1px solid #eee;
  border-radius: 8rpx 0 0 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.add-btn {
  width: 160rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #409eff;
  color: #fff;
  border-radius: 0 8rpx 8rpx 0;
  font-size: 28rpx;
}

.btn-group {
  display: flex;
  gap: 24rpx;
}

.scan-btn {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.verify-btn {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #52c41a;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}

/* 购物车区域样式 */
.cart-section {
  flex: 1;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #eee;
}

.cart-title {
  font-size: 32rpx;
  font-weight: bold;
}

.clear-btn {
  color: #ff4d4f;
  background-color: transparent;
  font-size: 28rpx;
  padding: 0;
  height: auto;
  line-height: normal;
}

.cart-list {
  flex: 1;
  overflow-y: auto;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.item-img {
  width: 120rpx;
  height: 120rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 30rpx;
  display: block;
  margin-bottom: 8rpx;
}

.item-price {
  color: #ff4d4f;
  font-size: 28rpx;
}

.item-count {
  display: flex;
  align-items: center;
}

.count-btn {
  width: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 8rpx;
  font-size: 32rpx;
}

.count {
  width: 60rpx;
  text-align: center;
  font-size: 28rpx;
}

/* 购物车底部样式 */
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-top: 1px solid #eee;
  margin-top: 16rpx;
}

.total {
  font-size: 30rpx;
}

.total-price {
  color: #ff4d4f;
  font-weight: bold;
  font-size: 32rpx;
}

.checkout-btn {
  width: 200rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
}
</style>